<template>
	<view class="poster flex flex-dir-col flex-ai-center flex-js-center" style="width: 100vw;" v-show="show">
		
		<view id='poster' style="width: 300px;box-shadow: 0 2px 2px #adadad;" class="bg-color-white pb-12 br-12">
			<image class="br-12" v-if="product.main_image||product.cover_image" style="width: 300px;height: 300px;" mode="widthFix" @load="imgLoad" :src="$ossUrl+(product.main_image||product.cover_image)" ></image>
			<view class="plr-12 flex flex-js-sb">
				<view class="flex flex-dir-col flex-js-sb flex-1">
					<view class="font-size-14 font-color-dark font-w-600  text-overflow" style="width: 200rpx;">
						{{product.name}}
					</view>
					<view class="flex flex-ai-center pt-12">
						<view v-if="product.tag" class="font-color-666 font-size-12 flex flex-ai-center flex-js-center" style="width: 48rpx;height: 48rpx;border-radius: 24rpx;" :class="product=='版'? 'bg-color-blue':'bg-color-green'">
							{{product.tag}}
						</view>
						<!-- <view v-if="product.price" class="ml-8 font-color-dark font-size-12 border-color-dark" style="border: 1px solid;height: 30rpx;line-height: 30rpx;">
							<text class="bg-color-dark font-color-white">
								发行价：
							</text>
							￥{{product.price}}
						</view> -->
						<w-tag v-if="product.price" name="发行价" :value="`￥${product.price}`"></w-tag>
						<!-- <z-info-label v-if="product.price" title="发行价：" :value='`￥${product.price}`'></z-info-label> -->
					</view>
				</view>
				<image :src="codeImg" mode="widthFix" style="width: 180rpx;height: 180rpx;min-width: 180rpx;"></image>
			</view>
		</view>
		<view class="btn flex mt-26">
			<!-- <view class="save-btn font-size-14 font-color-yellow bg_jb_theme mr-8" @click="poster.save">
				保存海报
			</view> -->
			<w-button @click="poster.save">保存海报</w-button>
			<!-- <z-button class='save-btn' type="dark" @click.native="poster.save">保存海报</z-button> -->
			<!--  #ifdef  APP -->
			<view class="share-wechat font-size-14 font-color-white ml-8" @click="poster.share">
				<image class="img" src="/static/img/icon/wechat-white-icon.png" mode=""></image>
				分享到微信
			</view>
			<!--  #endif -->
		</view>
		<u-icon style='margin-top: 50rpx;' name='close-circle' color='#9091AF' size='32' @click="close"></u-icon>
	</view>
</template>

<script>
	import {
		ApiHost
	} from '@/config/index.js'
	import {base64ToPath } from 'image-tools'
	import {mapState} from 'vuex'
	export default {
		name: "z-image-share",
		props:{
			product:{
				type:Object,
				default(){
					return {
						
					}
				}
			},
			sharePath:{
				type:String,
				default:''
			},
			show:Boolean
		},
		model:{
			prop:"show",
			event:"change"
		},
		data() {
			return {
				size:{
					width:300,
					height:300
				},
				localUrl:'',
				codeImg:'',
				loading:false
			};
		},
		computed:{
			...mapState('user',['userInfo']),
			...mapState('config',{
				config(state){
					return state.info
				}
			}),
			height(){
				let rate=300/this.size.width
				console.log('高度变化',this.size.height*rate)
				return this.size.height*rate;
			}
		},
		watch:{
			show(v){
				if(v) this.getCode()
			}
		},
		mounted() {
			
		},
		methods:{
			//获取图片尺寸
			 imgLoad({detail}){
				this.size=detail;
			},
			//获取用户邀请二维码
			getCode(){
				this.updateAuth();
				if(!this.isLogin){
					this.$emit('change',false)
					return uni.showToast({
						icon:'none',
						title:'请先登录',
						success(){
							setTimeout(()=>{
								uni.navigateTo({
									url:"/pages/login/login"
								})
							},1500)
						}
					})
				}
				// console.log('获取用户邀请码')
				let curRoute=getCurrentPages()
				console.log('获取成功',this.product)
				console.log(curRoute[curRoute.length-1].$page)
				let fullUrl='/\#' + curRoute[curRoute.length-1].$page.fullPath
				if(this.sharePath){
					if(this.product.invitFriend == 1) {
						fullUrl = '/\#' + this.sharePath + '&invitFriend=1'
					}else {
						fullUrl = '/\#' + this.sharePath
					}
				}else{
					if(this.product.invitFriend == 1) {  //判断是否邀请好友助力
						if(!Object.keys(curRoute[curRoute.length-1].$page.options).length) {
							fullUrl = fullUrl + '?invitFriend=1'
						}else{
							fullUrl = fullUrl + '&invitFriend=1'
						}
					}
				}
				console.log(fullUrl,'分享后的url地址');
				let url=`${ApiHost}/addons/qrcode/index/build?text_type=collection&text=${this.userInfo.inviter_code}&t=${new Date().getTime()}&url=${encodeURIComponent(fullUrl)}`
				this.codeImg =url
			},
			downloadFile(){
				
			},
			close(){
				this.$emit('change',false)
			},
			//保存海报
			saveImage(url){
				let _this=this;
				base64ToPath(url).then(path=>{
					//#ifdef H5
					let a = document.createElement('a')
					a.setAttribute('download', "")
					a.setAttribute('href', path)
					document.body.appendChild(a);
					a.style.display = 'none'
					a.click()
					document.body.removeChild(a)
					_this.hideLoading()
					//#endif
					//#ifndef H5
					uni.saveImageToPhotosAlbum({
						filePath: path,
						success() {
							_this.hideLoading()
							uni.showToast({
								icon: "success",
								title: "保存成功"
							})
						},
						fail(err){
							_this.hideLoading()
							uni.showToast({
								icon: "success",
								title: "失败"
							})
						}
					})
					//#endif
				})
			},
			//分享海报
			shareImage(url){
				base64ToPath(url).then(path=>{
					//获取分享服务商
					let _this=this;
					uni.shareWithSystem({
						type:'image',
						summary:`欢迎注册${_this.config.appName}`,
						href:`${_this.config.h5_domain}/#/pages/login/register?content=${_this.userInfo.inviter_code}`,
						imageUrl:path,
						success() {
							_this.hideLoading()
						},
						fail(err) {
							_this.hideLoading()
							console.log(err)
						}
					})
				})
			},
			showError(){
				uni.showToast({
					icon:'error',
					title:"生成海报失败"
				})
				this.hideLoading()
			},
			showLoading(){
				uni.showLoading({
					title:"生成中"
				})
			},
			hideLoading(){
				uni.hideLoading()
			}
		}
	}
</script>



<script module='poster' lang='renderjs'>
	import html2canvas from 'html2canvas'
	export default {
		data() {
			return {

			}
		},
		methods: {
			save(e, ownerVm) {
				ownerVm.callMethod('showLoading')
				const dom = document.getElementById('poster')
				html2canvas(dom, {
					width: dom.clientWidth,
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					scale: 5,
					dpi: 1000,
					imageTimeout:15000,
					useCORS: true,
				}).then((canvas)=>{
					ownerVm.callMethod('saveImage', canvas.toDataURL('image/png'))
				}).catch(e=>{
					ownerVm.callMethod('showError')
					console.log("生成失败",e);
				})
			},
			share(e, ownerVm){
				ownerVm.callMethod('showLoading')
				const dom = document.getElementById('poster')
				html2canvas(dom, {
					width: dom.clientWidth,
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					scale: 5,
					dpi: 1000,
					imageTimeout:5000,
					useCORS: true,
				}).then((canvas)=>{
					ownerVm.callMethod('shareImage', canvas.toDataURL('image/png'))
				}).catch(e=>{
					ownerVm.callMethod('showError')
					console.log(e)
				})
			}
		}
	}
</script>

<style lang="scss">
.poster{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	.save-btn {
		// border-color: #F9B7D4;
	}
	
	.share-wechat {
		background-color: #23AD31;
		border-color: #23AD31;
	}
	
	.save-btn,
	.share-wechat {
		width: 284rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		// border-width: 1px;
		// border-style: solid;
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.img {
			width: 48rpx;
			height: 48rpx;
			margin-right: 4px;
		}
	}
}
</style>
